<template>
  <div id="echartsMap">
      <table style="height:100%;width:100%;">
      <tr>
      <td id="tdMap" rowspan="2">
           <div id="echartsProvince"></div>
      </td>
      <td>
        <div id="echartsRigthTop"></div>
      </td>
        </tr>
        <tr>
          <td>
            <div id="echartsRigthBottom"></div>
          </td>
          </tr>
    </table>
  </div>
</template>

<script>
import optionAnhui from '../../../assets/js/map-option-fujian.js'
import echartsRigthTopOption from '../../../assets/js/echartsRightTop.js'
import echartsRigthBottomOption from '../../../assets/js/echartsRightBottom.js'
require('echarts/map/js/province/fujian')

export default {
  name: 'echartsMap',
  data () {
    return {
      msg: ''
    }
  },
 mounted(){
   let that = this
   this.drawProvinceMap(document.getElementById('routerBase').offsetHeight);
    
  },
  methods: {
          drawTop(){
            let that = this;
            let myChartTop = that.$echarts.init(document.getElementById('echartsRigthTop'));
             myChartTop.setOption(echartsRigthTopOption);
             setTimeout(() => {
               that.drawBottom();
             }, 100);
          },
          drawBottom(){
            let that = this;
            let myChartTop = that.$echarts.init(document.getElementById('echartsRigthBottom'));
             myChartTop.setOption(echartsRigthBottomOption);
          },
          drawProvinceMap(height) {
            let that  = this 
            document.getElementById('echartsProvince').style.height = height*0.9+'px';
            let myChart = this.$echarts.init(document.getElementById('echartsProvince'));
            myChart.setOption(optionAnhui);
            that.drawTop();
            window.addEventListener("resize",function(){
                    setTimeout(function () {
                      myChart.resize();
                      },200);
              
            });
          },
        }
        
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 @import '../../../styles/province.scss';
</style>